<template>
  <q-page class="flex flex-center region-drag">
    <q-form @submit="onSubmit" class="q-gutter-y-md login-form">
      <div class="text-center q-pb-lg">
        <q-avatar size="80px" color="primary" rounded>
          <img src="icons/favicon-96x96.png" alt="" />
        </q-avatar>
      </div>
      <q-input
        v-model="data.mobile"
        type="text"
        lazy-rules
        hide-bottom-space
        filled
        placeholder="请输入账号"
        input-class="text-bold text-body1"
        :rules="[(val) => (val && val.length > 0) || 'Please type something']"
      />
      <q-input
        v-model="data.password"
        :type="data.isPwd ? 'password' : 'text'"
        filled
        placeholder="请输入密码"
        input-class="text-bold text-body1"
        hide-bottom-space
      >
        <template v-slot:append>
          <q-icon
            :name="data.isPwd ? 'visibility_off' : 'visibility'"
            class="cursor-pointer"
            @click="data.isPwd = !data.isPwd"
          />
        </template>
      </q-input>
      <q-btn
        label="登录"
        unelevated
        class="full-width submit-btn"
        color="primary"
        :loading="data.loading"
        type="submit"
        size="lg"
      />

      <q-checkbox v-model="data.auto" label="自动登陆" dense />
    </q-form>
  </q-page>
</template>

<style lang="scss">
.login-form {
  width: 300px;
  margin: 0 auto;
  .q-field__control,
  .q-field__marginal {
    height: 48px !important;
  }
  .submit-btn {
    font-size: 16px !important;
    padding: 10px 16px;
  }
}
</style>

<script>
import { api } from "src/boot/axios";
import { defineComponent, reactive } from "vue";
import { useStore } from "vuex";
import { ipcRenderer } from "electron";

export default defineComponent({
  name: "PagesLoginPageVue",
  setup() {
    const $store = useStore();
    const data = reactive({
      mobile: "13566667777",
      password: "000000",
      isPwd: true,
      loading: false,
      auto: false,
    });

    function onSubmit() {
      data.loading = true;
      api
        .post("/user/login", {
          mobile: data.mobile,
          password: data.password,
        })
        .then((res) => {
          $store.commit("persisted/setUserinfo", res);
          window.close();
          ipcRenderer.invoke("startMainWindow");
        })
        .finally(() => (data.loading = false));
    }
    return {
      data,
      onSubmit,
    };
  },
});
</script>
